<template>
  <section class="todoapp">
    <Header @getlist="getlist"></Header>
    <Main :list="list" @allin="allin" @dell="dell2"></Main>
    <Footer :list="list" @dell="dell" @all="alls"></Footer>
  </section>
</template>

<script>
import Footer from './componets/footer.vue'
import Header from './componets/header.vue'
import Main from './componets/main.vue'
export default {
  components: { Footer, Header, Main },
  data() {
    return {
      flag:false,
      // list: [
      //   { id: 1, name: '吃饭', isDone: true ,show:true},
      //   { id: 2, name: '睡觉', isDone: false ,show:true},
      //   { id: 3, name: '打豆豆', isDone: true,show:true },
      // ],
      list:JSON.parse(localStorage.getItem('key')) ||[]
    }
  },
  methods: {
    getlist(val) {
      this.list.push({ id: Math.random()*10, name: val, isDone: false,show:true})
    },
    dell() {
      this.list = this.list.filter((x) => {
        if (!x.isDone) {
          return x
        }
      })
    },
    alls() {
      
    },
    allin() {
      this.flag = !this.flag
      this.list.forEach(x => {
        x.isDone=this.flag
      })
    },
    dell2(id) {
       this.list = this.list.filter((x) => {
        if (x.id !== id) {
          
         return x
        }
      })
    }
  },
  watch: {
    list: {
      deep: true,
      handler(val) {
        localStorage.setItem('key',JSON.stringify(val))
      }
    }
  }
}
</script>

<style></style>
